<template>
  <!-- 运营管理-官网模板编辑 -->
  <div class="ow_templateedite">
    <div class="content-edite">
      <span class="title">编辑模板</span>
      <div class="box-form">
        <div class="box-left">
          <div class="row">
            <span class="must-input txtlable">模板名称</span>
            <el-input class="templateInput" v-model="templateInput" placeholder="请输入模板名称"></el-input>
          </div>
          <div class="row">
            <span class="txtlable">所属机构</span>
            <span class="txtvalue">金太阳</span>
          </div>
           <div class="row">
            <span class="txtlable">创建人</span>
            <span class="txtvalue">啧啧啧</span>
          </div>
           <div class="row">
            <span class="txtlable">创建时间</span>
            <span class="txtvalue">2019.00.00</span>
          </div>
        </div>
        <div class="box-right">
          <span class="must-input txtlable">模板首图</span>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="basicInfo_handlePictureCardPreview"
            :on-remove="basicInfo_handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="basicInfo.ruleForm.dialogVisible">
            <img width="100%" :src="basicInfo.ruleForm.dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
        <el-tabs class="tabsControl" v-model="tabsObj.activeName" @tab-click="tabshandleClick">
          <el-tab-pane label="基本信息" name="basicInfo" class="basicInfo">
            <el-form
                :model="basicInfo.ruleForm"
                :rules="basicInfo.rules"
                ref="basicInfo-ruleForm"
                label-width="1.6rem"
                class="ruleForm"
              >
             <el-form-item label="校区名称" prop="schoolName">
                <el-input v-model="basicInfo.ruleForm.schoolName"></el-input>
              </el-form-item>
              <el-form-item label="校区地址" prop="schoolAddress">
                <el-input v-model="basicInfo.ruleForm.schoolAddress"></el-input>
              </el-form-item>
              <el-form-item label="校区电话" prop="schoolTel">
                <el-input v-model="basicInfo.ruleForm.schoolTel"></el-input>
              </el-form-item>
              <el-form-item class="is-required" label="校区环境" >
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="basicInfo_handlePictureCardPreview"
                  :on-remove="basicInfo_handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="basicInfo.ruleForm.dialogVisible">
                  <img width="100%" :src="basicInfo.ruleForm.dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
              <el-form-item label="优惠活动" prop="promotion">
                <el-input :rows="5" type="textarea" v-model="basicInfo.ruleForm.promotion"></el-input>
              </el-form-item>
              <!-- <div class="btnbox">
                <el-button class="" @click="popularize">推广</el-button>
                <el-button class="cancel" type="primary" @click="resetForm('basicInfo-ruleForm')">保存并应用</el-button>
                <el-button class="ok" type="primary" @click="submitForm('basicInfo-ruleForm')">保存</el-button>
              </div> -->
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="品牌介绍" name="brandInfo" class="brandInfo">
             <keep-alive>
              <!-- <editor ref="brandInfoEditor" 
                  id="brandInfoeditor" 
                  v-bind:r_content="'<p><strong>初始值测试-brandInfo</strong></p>'"
                  :hight="500">
              </editor> -->
              <wangeditor :editorId="'templateedite'" :catchData="(d)=>{}"
                  :content="'test'"></wangeditor>
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane label="课程介绍" name="courseInfo" class="courseInfo">
            <el-card v-for="(row,index) in courseInfo.courseData" :key="index" :body-style="{ padding: '0px' }">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
              <div style="padding: 14px;">
                <span class="courseName">{{row.courseName}}</span>
                <div class="box-courseInfo">
                  {{row.className}}|
                  {{row.age}}|
                  {{row.courseCount}}
                </div>
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px' }" class="lastCard">
              <i class="el-icon-plus"></i>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="师资介绍" name="teacherInfo" class="teacherInfo">
            <div class="box-top">
              <el-button class="addteacher" type="primary" @click="addteacher">新增教师</el-button>
            </div>
            <div class="box-bottom">
              <el-table
                ref="teacherInfoTable"
                :data="teacherInfo.tabledata"
                stripe
                style="'width: 100%;"
                class="teacherInfoTable"
                >
                <el-table-column
                prop="index"
                align="center"
                label="排序">
                </el-table-column>
                <el-table-column
                prop="teacherName"
                align="center"
                label="教师名称">
                </el-table-column>
                 <el-table-column
                prop="teacherImage"
                align="center"
                label="头像">
                <template slot-scope="scope">
                  <img class="teacherImage" :src="scope.row.teacherImage" />
                </template>
                </el-table-column>
                <el-table-column
                prop="years"
                align="center"
                label="教龄">
                </el-table-column>
                <el-table-column
                prop="introduce"
                align="center"
                label="简介">
                </el-table-column>
                <el-table-column
                prop="visitCount"
                align="center"
                sortable
                label="浏览量">
                </el-table-column>
                <el-table-column
                prop="query"
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <el-button class="oprateBtn"  @click="teacherInfoTableRowClick(scope.row)" type="text" size="medium">查看</el-button>
                  <el-button class="oprateBtn"   @click="teacherInfoTableRowClick(scope.row)" type="text" size="medium">编辑</el-button>
                  <el-button class="oprateBtn"   @click="teacherInfoTableRowClick(scope.row)" type="text" size="medium">删除</el-button>
                </template>
                </el-table-column>
              </el-table>
              <el-pagination
                class="pagination"
                @current-change="teacherInfohandleCurrentChange"
                :current-page.sync="teacherInfo.pagination.tableCurrentPage"
                :page-size="teacherInfo.pagination.pagesize"
                layout="jumper, prev, pager, next"
                :total="teacherInfo.pagination.total">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="校区信息" name="schoolInfo" class="schoolInfo">
            <el-form
                :model="schoolInfo.ruleForm"
                :rules="schoolInfo.rules"
                ref="schoolInfo-ruleForm"
                label-width="1.6rem"
                class="ruleForm"
              >
             <el-form-item label="营业时间" prop="openTime">
                <el-input v-model="schoolInfo.ruleForm.openTime"></el-input>
              </el-form-item>
              <el-form-item label="校区面积" prop="schoolArea">
                <el-input v-model="schoolInfo.ruleForm.schoolArea"></el-input>
              </el-form-item>
              <el-form-item label="校区教室" prop="classroomCount">
                <el-input v-model="schoolInfo.ruleForm.classroomCount"></el-input>
              </el-form-item>
              <el-form-item label="开店时间" prop="startTime">
                <el-input v-model="schoolInfo.ruleForm.startTime"></el-input>
              </el-form-item>
              <el-form-item class="is-required" label="校区亮点标签" >
               <div class="box-label">
                 <span class="toptxt">请选中符合的标签或添加自定义标签</span>
                 <el-tag
                  :key="tag"
                  v-for="tag in schoolInfo.tagsObj.dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="schoolInfo_handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="schoolInfo.tagsObj.inputVisible"
                  v-model="schoolInfo.tagsObj.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="schoolInfo_handleInputConfirm"
                  @blur="schoolInfo_handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="schoolInfo_showInput">+ 标签</el-button>
               </div>
              </el-form-item>
             
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div class="btnbox">
          <el-button class="" @click="popularize">推广</el-button>
          <el-button class="cancel" type="primary" @click="saveApply">保存并应用</el-button>
          <el-button class="ok" type="primary" @click="save">保存</el-button>
        </div>
    </div>
  </div>
</template>

<script>
// import editor from '@/components/common/editor'
import wangeditor from './wangeditor'
export default {
  components:{wangeditor},
  props:['templateedite'],
  data() {
    return {
      parentData:this.templateedite,
      templateInput:'',
      tabsObj:{
        activeName:'basicInfo'
      },
       basicInfo:{
        ruleForm: {
          type: ['在线微信支付','在线支付宝支付'],
          schoolName: "",
          schoolAddress: "",
          schoolTel: "",
          promotion:'',
          dialogImageUrl: '',
          dialogVisible: false
        },
        rules: {
          schoolName: [
            { required: true, message: "请输入校区名称", trigger: "blur" },
            { min: 2, max: 25, message: "长度在 2 到 25 个字符", trigger: "blur" }
          ],
          schoolAddress: [
            { required: true, message: "请输入校区地址", trigger: "blur" },
            { min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "blur" }
          ],
          schoolTel: [
            { required: true, message: "请输入校区电话", trigger: "blur" },
            { min: 2, max: 25, message: "长度在 2 到 25 个字符", trigger: "blur" }
          ],
        },
      },
      brandInfo:{

      },
      courseInfo:{
        courseData:[
          {
            courseName:'暑期特色夏令营',
            className:'夏令营',
            age:'4-6岁',
            courseCount:'48节'
          },
           {
            courseName:'暑期特色夏令营',
            className:'夏令营',
            age:'4-6岁',
            courseCount:'48节'
          },
           {
            courseName:'暑期特色夏令营',
            className:'夏令营',
            age:'4-6岁',
            courseCount:'48节'
          },
        ]
      },
      teacherInfo:{
        tabledata: [
          {
            index:1,
            teacherName:'萝岗校区',
            teacherImage:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
            years:'13年',
            introduce:'测试除删除是测试',
            visitCount:'11212'
          }
        ],
        /**分页 */
        pagination:{
          tableCurrentPage:1,
          pagesize:5,
          total:0
        },
      },
      schoolInfo:{
         ruleForm: {
          openTime: "",
          schoolArea: "",
          classroomCount: "",
          startTime:''
        },
        rules: {
          openTime: [
            { required: true, message: "请输入营业时间", trigger: "blur" },
            { min: 2, max: 25, message: "长度在 2 到 25 个字符", trigger: "blur" }
          ],
          schoolArea: [
            { required: true, message: "请输入校区面积", trigger: "blur" },
            { min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "blur" }
          ],
          classroomCount: [
            { required: true, message: "请输入教室数量", trigger: "blur" },
            { min: 2, max: 25, message: "长度在 2 到 25 个字符", trigger: "blur" }
          ],
          startTime: [
            { required: true, message: "请输入开店时间", trigger: "blur" },
            { min: 2, max: 25, message: "长度在 2 到 25 个字符", trigger: "blur" }
          ],
        },
        tagsObj:{
          dynamicTags: ['标签一', '标签二', '标签三'],
          inputVisible: false,
          inputValue: ''
        }
      }
      
    };
  },
  methods: {
    init(){
      let user=JSON.parse(tool.getItem(window.lsKey.user));

      //测试数据
      for(let i=1;i<this.teacherInfo.pagination.pagesize;i++){
        this.teacherInfo.tabledata.push({
          index:i+1,
          teacherName:'张无忌',
          teacherImage:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          years:'13年',
          introduce:'测试除删除是测试',
          visitCount:'11212'
        });
      }
      this.teacherInfo.pagination.total=50;
    },
    campusChange : function(campusId) { //校区改变
      this.init();
    },
    /**推广 */
    popularize(){

    },
    /**保存并应用 */
    saveApply(){
      //品牌简介富文本
      let brandInfoEditor=this.$refs.brandInfoEditor.getContentTxt();
      console.log(brandInfoEditor);
    },
    /**保存 */
    save(){
      //品牌简介富文本
      let brandInfoEditor=this.$refs.brandInfoEditor.getContentTxt();
      console.log(brandInfoEditor);
    },
    tabshandleClick(tab, event){
      console.log(tab, event);
    },
    /**提交按钮 */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**重置按钮 */
    resetForm(formName='ruleForm') {
      this.$refs[formName].resetFields();
    },
    basicInfo_handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    basicInfo_handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    addteacher(){

    },
    /**表格 行查看点击 */
    teacherInfoTableRowClick(d){
      console.log(d)
    },
    /**表格翻页 */
    teacherInfohandleCurrentChange(val) {
      // console.log(val)
      //测试数据
      this.teacherInfo.tabledata=[];
      let size=this.teacherInfo.pagination.pagesize;
      for(let i=size*(val-1);i<(size*(val-1)+size);i++){
        this.teacherInfo.tabledata.push({
          index:i+1,
          teacherName:'张无忌',
          teacherImage:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          years:'13年',
          introduce:'测试除删除是测试',
          visitCount:'11212'
        });
      }
    },
    schoolInfo_handleClose(tag) {
      this.schoolInfo.tagsObj.dynamicTags.splice(this.schoolInfo.tagsObj.dynamicTags.indexOf(tag), 1);
    },
    schoolInfo_showInput() {
      this.schoolInfo.tagsObj.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    schoolInfo_handleInputConfirm() {
      let inputValue = this.schoolInfo.tagsObj.inputValue;
      if (inputValue) {
        this.schoolInfo.tagsObj.dynamicTags.push(inputValue);
      }
      this.schoolInfo.tagsObj.inputVisible = false;
      this.schoolInfo.tagsObj.inputValue = '';
    }
  },
  mounted() {
	  this.init();
  },
  computed: {},
  watch: {},
  created: function() {}
};
</script>

<style lang="scss">
.ow_templateedite {
  .content-edite {
    padding: 0 0.04rem 0rem 0.04rem;
		font-size: 0.16rem;
    color: #333333;
    .must-input::before{
      content: '*';
      color: #F56C6C;
      margin-right: 0.04rem;
    }
    .title{
      display: block;
      width: 100%;
      font-size: 0.25rem;
      font-weight: bold;
      color: #333333;
      margin: 0 0 0.16rem 0;
    }
    .box-form{
      width: 100%;
      height: 2rem;
      .box-left{
        float: left;
        width: 50%;
        height: 100%;
        padding-left: 0.2rem;
        .row{
          height: 0.5rem;
          .templateInput{
            margin-left: 0.08rem;
            width: 2rem;
          }
          .txtlable{
            display: inline-block;
            width: 1rem;
            text-align: right;
          }
          .txtvalue{
            margin-left: 0.08rem;
          }
        }
      }
      .box-right{
        float: left;
        width: 50%;
        height: 100%;
        .txtlable{
          display: inline-block;
          width: 1rem;
          height: 100%;
          float: left;
        }
      }
    }
    .tabsControl{
        .el-tabs__item{
          font-size: 0.16rem !important;
        }
        // .el-tabs__content{
        //   height: 5.3rem;
        //   overflow: auto;
        // }
        // .el-tabs__content::-webkit-scrollbar {
        //   width: 0.05rem;
        //   height: 0.1rem;
        // }
        // .el-tabs__content::-webkit-scrollbar-thumb {
        //   border-radius: 0.5rem;
        //   background: #BBBBBB;
        // }
        // .el-tabs__content::-webkit-scrollbar-track {
        //   background: #F2F6FC;
        // }
        .ruleForm {
          margin: 0.2rem auto;
          width: 5.4rem;
          padding: 0 0.2rem;
          // border-left: 0.01rem solid rgba(102, 102, 102, 0.2);
          // border-right: 0.01rem solid rgba(102, 102, 102, 0.2);
          .el-form-item__label {
            font-size: 0.16rem !important;
          }
          .el-form-item__content {
            font-size: 0.16rem !important;
          }
          .box {
            .row-top {
              width: 100%;
              display: flex;
              justify-content: space-between;
              font-size: 0.16rem;
              color: #333333;
              margin-bottom: 0.1rem;
              .box-title {
                width: 2.2rem;
                display: flex;
                align-items: center;
                margin-left: 0.3rem;
                .ico {
                  width: auto;
                  height: 0.18rem;
                }
                .txt {
                  margin-left: 0.08rem;
                }
              }
              .helptxt {
                color: rgba(34, 116, 245, 1);
                font-style: italic;
              }
              .helptxt:hover {
                cursor: pointer;
              }
            }
          }
          .txtformrow {
            margin-bottom: 0rem;
          }
        }
        .basicInfo{

        }
        .brandInfo{

        }
        .courseInfo{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: flex-start;
          .el-card{
            width: 2.35rem !important;
            height: 3.12rem !important;
            margin-bottom: 0.16rem;
            .courseName{

            }
            .box-courseInfo{
              color: #666666;
              font-size: 0.14rem;
            }
          }
          .lastCard{
            font-size: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .lastCard:hover{
            cursor: pointer;
          }
        }
        .teacherInfo{
          .box-top{
            text-align: right;
          }
          .teacherImage{
            height: 0.5rem;
          }
          .oprateBtn{
            width: 100%;
            margin-left: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
          }
          .pagination{
            margin-top: 0.16rem;
            text-align: center;
          }
        }
        .schoolInfo{
          .box-label{
            .toptxt{
              width: 100%;
              color: #666666;
              font-style: italic;
              display: inline-block;
            }
            .el-tag  {
              margin-left: 10px;
            }
            .button-new-tag {
              margin-left: 10px;
              height: 32px;
              line-height: 30px;
              padding-top: 0;
              padding-bottom: 0;
            }
            .input-new-tag {
              width: 90px;
              margin-left: 10px;
              vertical-align: bottom;
            }
          }
        }
      }
      .btnbox{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 0.1rem;
        .cancel {
          //   margin-left: 0.9rem;
        }
        .ok {
          margin-left: 0.3rem;
        }
      }
    
  }
  // 滚动条
  .scrollbarstyle::-webkit-scrollbar {
    width: 0.05rem;
    height: 0.1rem;
  }
  .scrollbarstyle::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background: #BBBBBB;
  }
  .scrollbarstyle::-webkit-scrollbar-track {
    background: #F2F6FC;
  }
}
.ow_templateeditePopup{
  top: 0.81rem !important;
  left: 2.1rem !important;
  background-color: rgba(0,0,0,0.3);
  .el-dialog{
    width: 12.5rem;
    .el-dialog__header{
      text-align: center;
    }
    .el-dialog__title{
      font-size: 0.25rem;
      font-weight: bold;
      color: #333333;
      
    }
    .el-dialog__headerbtn{
      font-size: 0.25rem !important;
    }
  }
}
</style>